<!-- 开通页面 -->
<template>
  <div class="contain">
    <div class="wrapper">
      <!-- 主体内容 -->
      <div class="main_content">
        <!-- 头部 -->
        <div class="content_top">
          <span>开通会员vip</span>
          <span class="changeHanld" @click="close">&times;</span>
        </div>
        <!-- 正文 -->
        <div class="content_text">
          <div class="type"></div>
          <div class="select">
            <div
              class="select_item changeHanld"
              :class="type.item == '014' ? 'active' : ''"
              @click="hanldClick('014', '8.8')"
            >
              <div class="select_item_top">HOT</div>
              <div class="title">查询劵</div>
              <div class="money_item">
                <!-- <span>首月</span> -->
                <div class="money_L">8.8</div>
                <div class="money_R">元/10次</div>
              </div>
              <span class="del">30元</span>
              <p>紧急查询就用它</p>
            </div>
            <div
              class="select_item changeHanld"
              :class="type.item == '001' ? 'active' : ''"
              @click="hanldClick('001', '138')"
            >
              <div class="select_item_top">买1送1·送1个月</div>
              <div class="title">1 + 1 个月</div>
              <div class="money_item">
                <!-- <span>首月</span> -->
                <div class="money_L">138</div>
                <div class="money_R">元</div>
              </div>
              <span class="del">300元</span>
              <p>新人尝鲜体验</p>
            </div>
            <div
              class="select_item changeHanld"
              :class="type.item == '006' ? 'active' : ''"
              @click="hanldClick('006', '688')"
            >
              <div class="select_item_top">买1送1·送6个月</div>
              <div class="title">6 + 6个月</div>
              <div class="money_item">
                <!-- <span>首月</span> -->
                <div class="money_L">688</div>
                <div class="money_R">元</div>
              </div>
              <span class="del">1200元</span>
              <p>仅57元/月</p>
            </div>
            <div
              class="select_item changeHanld"
              :class="type.item == '003' ? 'active' : ''"
              @click="hanldClick('003', '988')"
            >
              <div class="select_item_top">买1送1·送12个月</div>
              <div class="title">12 + 12个月</div>
              <div class="money_item">
                <!-- <span>首月</span> -->
                <div class="money_L">988</div>
                <div class="money_R">元</div>
              </div>
              <span class="del">1800元</span>
              <p>仅41元/月</p>
            </div>
            <div
              class="select_item changeHanld"
              :class="type.item == '010' ? 'active' : ''"
              @click="hanldClick('010', '1688')"
            >
              <div class="select_item_top">买1送1·送24个月</div>
              <div class="title">24 + 24 个月</div>
              <div class="money_item">
                <!-- <span>首月</span> -->
                <div class="money_L">1688</div>
                <div class="money_R">元</div>
              </div>
              <span class="del">2800元</span>
              <p>只需1.17元/天</p>
            </div>
          </div>
          <div class="money"></div>
          <div class="discounts"></div>
          <div class="pay">
            <p>应付金额：</p>
            <span>{{ type.money && Number(type.money).toFixed(2) }}元</span>
          </div>
          <div class="payCode">
            <p>支付方式：</p>
            <div class="code">
              <canvas ref="qrcode">
                <img src="" alt=""/>
              </canvas>
            </div>
          </div>
          <div class="textRemind"></div>
        </div>
        <!-- 底部 -->
        <div class="content_foot"></div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {commonRequest, postRequest} from "../../api/api.js";
import {appId, callBackUrl} from '../../constant/index'
import {post} from "../../http/axios.js";
import QRCode from "qrcode";

export default {
  props: {
    type: {
      type: Object,
      defalut: {}
    }
  },
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      currentItem: "", // 切换类名样式
      timeId: null // 设置定时器
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    "type.item"(val) {
      if (val) {
        this.generateQRCode(val)
      }
    }
  },
  //方法集合
  methods: {
    generateQRCode(payType) {
      let domain = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port : '')
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=` +
        encodeURIComponent(`${callBackUrl}/app/payNew.html?payType=` + payType + "&userId=" + userInfo.id + "&redirectUrl="+domain+"/pages/index/index") +
        `&response_type=code&scope=snsapi_base`;
      //生成二维码连接让用户微信扫码
      this.qrcode(url);
    },
    // 点击关闭按钮
    close() {
      this.$emit("isShow", false);
    },
    // 获取订单选择的信息
    hanldClick(val, money) {
      // val是 选中的类型
      // money: 金额
      this.$emit("currentItem", {item: val, money});
      this.generateQRCode(val)
    },
    // 获取订单id
    getOrderId(val) {
      let data = {
        PayType: val,
        returnUrl: "pay-record.html?version=20170420",
        UserId: "1356060086926135297"
      };
      post("http://gz.51bmj.cn/WeiXinPay/PayInPC", data).then(res => {
        this.qrcode(res.PlayUrl);
        this.timeId = setInterval(() => {
          this.isPay(res.OrderId);
        }, 2000);
      });
    },
    // 扫码轮询
    isPay(val) {
      post(`http://gz.51bmj.cn/weixinPay/IsPaySuccess?orderId=${val}`).then(
        res => {
          if (res) {
            clearInterval(this.timeId);
            this.close();
          }
        }
      );
    },

    // 生成二维码
    qrcode(url) {
      let _this = this;
      let opts = {
        errorCorrectionLevel: "H",
        type: "image/png", // 生成的二维码类型
        quality: 0.8, // 二维码质量
        margin: 0, // 二维码留白边距
        width: 200, // 宽度
        color: {
          dark: "#333", // 前景色
          light: "#fff" // 背景色
        }
      };
      QRCode.toCanvas(_this.$refs.qrcode, url, opts);
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素)
  mounted() {
    // 生成订单id
    // this.getOrderId();
  }
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
.wrapper {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);

  .main_content {
    background: #fff;
    width: 1080px;
    height: 560px;
    margin: 90px auto 0;

    .content_top {
      display: flex;
      height: 30px;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      background-color: #faf6ef;
    }

    .content_text {
      padding: 20px 30px;

      .type {
      }

      .select {
        // display: flex;
        overflow: hidden;
        padding-left: 32px;
        // justify-content: space-between;
        .select_item {
          padding-top: 30px;
          //   flex: 1;
          border: 1px solid #f5f5f5;
          float: left;
          width: 167px;
          margin-left: 30px;
          background-color: #f5f5f5;
          border-radius: 6px;
          padding-bottom: 18px;
          position: relative;

          &.active {
            border: 1px solid #d6c994;
            background-color: #fef5ca;
          }

          &:first-child {
            margin-left: 0px;
          }

          .select_item_top {
            position: absolute;
            right: 0;
            top: 0;
            padding: 4px;
            background-color: #d9b567;
            border-radius: 0 6px;
            color: #fff;
            font-size: 12px;
            // width: 30%;
          }

          .title {
            line-height: 40px;
            text-align: center;
            font-size: 18px;
          }

          .money_item {
            position: relative;
            align-items: center;
            justify-content: center;
            font-size: 25px;
            display: flex;
            color: #854f14;
            height: 60px;
            font-weight: 700;
            // span {

            //   border: 1px solid #ccc;
            //   padding: 4px 6px;
            //   color: #a47c50;
            //   font-size: 14px;
            //   font-weight: 400;
            // }
            .money_L {
              font-size: 30px;
            }

            .money_R {
              font-size: 14px;
              margin-top: 10px;
              color: #545454;
              font-weight: 400;
            }
          }

          .del {
            display: flex;
            align-items: center;
            line-height: 20px;
            height: 15px;
            font-size: 14px;
            justify-content: center;
            color: #ccc;
            text-decoration: line-through;
          }

          p {
            font-size: 14px;
            text-align: center;
            margin-top: 15px;
          }
        }
      }

      .money {
      }

      .discounts {
      }

      .pay {
        display: flex;
        height: 40px;
        align-items: center;
        font-size: 20px;
        padding-left: 30px;
        margin-top: 20px;

        p {
        }

        span {
          margin-left: 20px;
          color: #f45b5b;
        }
      }

      .payCode {
        padding-left: 30px;
        display: flex;
        font-size: 20px;

        p {
        }

        .code {
          margin-left: 20px;
        }
      }

      .textRemind {
      }
    }

    /* .content_foot {
    } */
  }
}
</style>
